import { useSelector, useDispatch } from 'react-redux'
import { insert } from '../../../../store/modules/schemaSlice'
import { nanoid } from '@reduxjs/toolkit'
import { Button } from 'antd'


export default function () {

    const dispatch = useDispatch()

    const handleClick = (val: any) => {
        if (val === 1) {
            dispatch(insert({
                id: nanoid(),
                type: 'title',
                element: 'h1',
                props: {
                    value: '标题1',
                    color: 'red',
                    textAlign: 'center',
                }
            }))
        } else if (val == 2) {
            dispatch(insert({
                id: nanoid(),
                type: 'title',

                element: 'h2',
                props: {
                    value: '标题2',
                    color: 'red',
                    textAlign: 'center',
                }
            }))
        }
        else if (val == 3) {
            dispatch(insert({
                id: nanoid(),
                type: 'title',

                element: 'h3',
                props: {
                    value: '标题3',
                    color: 'red',
                    textAlign: 'center',
                }
            }))
        }
        else if (val == 4) {
            dispatch(insert({
                id: nanoid(),
                type: 'title',

                element: 'h4',
                props: {
                    value: '标题4',
                    color: 'red',
                    textAlign: 'center',
                }
            }))
        }
        else if (val == 5) {
            dispatch(insert({
                id: nanoid(),
                type: 'title',
                element: 'h5',
                props: {
                    value: '标题5',
                    color: 'red',
                    textAlign: 'center',
                }
            }))
        }
    }
    return (
        <>
            <div style={{ textAlign: 'center' }}>组件</div>
            <div>
                <h3>标题</h3>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <Button onClick={() => handleClick(1)} id="h1">
                        一级标题
                    </Button>
                    <h1 >一级标题</h1>
                </div>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <Button onClick={() => handleClick(2)}>
                        二级标题
                    </Button>
                    <h2>二级标题</h2>
                </div>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <Button onClick={() => handleClick(3)}>
                        三级标题
                    </Button>
                    <h3>三级标题</h3>
                </div>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <Button onClick={() => handleClick(4)} >
                        四级标题
                    </Button>
                    <h4>四级标题</h4>
                </div>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <Button onClick={() => handleClick(5)}>
                        五级标题
                    </Button>
                    <h5>五级标题</h5>
                </div>
            </div>
        </>
    )
}